<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="css/common.css" type="text/css"/>
    <link rel="stylesheet" href="css/public.css" type="text/css"/>
    <link href="../plugin/jQueryTreeGrid/TreeGrid.css" rel="stylesheet">
    <link rel="stylesheet" href="css/list.css" type="text/css"/>
    <!--<link type="text/css" rel="stylesheet" href="css/layer.css" id="skinlayercss">-->
    <script type="text/javascript" src="js/jquery-1.4.2.min.js"></script>
    <script type="text/javascript" src="../plugin/jQueryTreeGrid/TreeGrid.js"></script>
    <!--<script type="text/javascript" src="js/jquery.placeholder.js"></script>-->
    <!--<script type="text/javascript" src="js/jquery.validate.min.js"></script>-->
    <!--<script type="text/javascript" src="js/WdatePicker.js"></script>-->
    <!--<script type="text/javascript" src="js/layer.min.js"></script>-->
    <script type="text/javascript" src="js/ec.js"></script>
</head>
<body>
<div times="1" showtime="0" class="arch-divs">
    <div class="xubox_main">
        <form id="listForm" action="list.jhtml" method="get">
            <div class="tab set">
                <div class="txte lh-px50">
                    <p class="fl">
                        <input type="text" placeholder="开始时间" name="startDate" id="startDate"
                               onfocus="WdatePicker({dateFmt:'yyyy-MM-dd HH:mm:ss',maxDate:'#F{$dp.$D(\'endDate\')}'})"
                               readonly="" class="txt datetime">
                        <input type="text" placeholder="结束时间" name="endDate" id="endDate"
                               onfocus="WdatePicker({dateFmt:'yyyy-MM-dd HH:mm:ss',minDate:'#F{$dp.$D(\'startDate\')}'})"
                               readonly="" class="txt datetime">
                    </p>
                    <p class="pre fl">
                        <select name="oilId" id="oilId" class="txt">
                            <option value="">-油站-</option>
                            <option value="40314952795291648">92</option>
                            <option value="40315004687220736">95</option>
                            <option value="40315041295106048">98</option>
                            <option value="40315222421929984">柴油</option>
                            <option value="43861448505425920">煤油</option>
                            <option value="43939429923946496">97</option>
                        </select>
                        <a href="javascript:;" class="arrows" style="top: 0;">∨</a>
                    </p>
                    <p class="fl">
                        <input type="text" name="memberMobile" id="memberMobile" value="" placeholder="手机号" class="txt">
                    </p>
                    <p class="fr">
                        <input type="submit" value="搜索" class="sear red">
                    </p>
                </div>
                <div class="tablist">
                    <div id="div1"></div>
                    <!--<input type="button" value="取得当前行的数据" onclick="selectedItem()">-->
                    <!--<input type="text" id="currentRow" size="110" />-->
                    <input type="hidden" id="pageSize" name="pageSize" value="10">
                </div>
            </div>
        </form>
    </div>
</div>
<script type="text/javascript">
    var config = {
        id: "tg1",                                                                      // 组件实例的id。
        width: "200",                                                                   // 组件实例的宽度。
        renderTo: "div1",                                                               // 用于显示组件实例的容器对象的id。一般用div作为容器。
        headerAlign: "left",                                                            // 标题行的对齐方式。
        headerHeight: "30",                                                             // 标题行的高度。
        dataAlign: "left",                                                              // 数据行的对齐方式。
        indentation: "20",                                                              // 层级缩进量。
        folderOpenIcon: "../plugin/jQueryTreeGrid/images/open.png",                // 节点展开时的图标。
        folderCloseIcon: "../plugin/jQueryTreeGrid/images/end.png",                // 节点关闭时的图标。
        defaultLeafIcon: "../plugin/jQueryTreeGrid/images/defaultLeaf.gif",       // 叶节点的图标。
        hoverRowBackground: "false",                                                   // 鼠标滑过数据行时，背景色是否改变。
        folderColumnIndex: "0",                                                         // 显示图标的数据列的索引，从0开始。
        itemClick: "itemClickEvent",                                                    // 单击数据行后触发的事件。事件方法包含三个参数，分别是：行的id、行的索引、行数据。
        columns: [                                                                        // 值为数组，数组元素为json对象。定义数据栏相关信息。
            /*
             *headerText：栏的标题。
             * dataField：栏数据对应的字段名。
             * headerAlign：栏头对齐方式。
             * dataAlign：栏数据对齐方式。
             * width：栏的宽度。
             * handler：通过指定的方法来自定义栏数据。
             * folderHidden：在文件夹行隐藏单元格值。
             * */
            {headerText: "", headerAlign: "left", dataAlign: "left", width: "20"},
            {headerText: "名称", dataField: "name", headerAlign: "left", handler: "customOrgName"},
            {headerText: "拼音码", dataField: "code", headerAlign: "left", dataAlign: "left", width: "100"},
            {headerText: "负责人", dataField: "assignee", headerAlign: "left", dataAlign: "left", width: "100"},
            {
                headerText: "操作",
                headerAlign: "left",
                dataAlign: "left",
                width: "200",
                handler: "customLook",
                folderHidden: false
            }
        ],
        data: [                                                                         // 组件的数据集。
            {
                name: "城区分公司", code: "CQ", assignee: "", children: [
                {name: "城区卡品分销中心"},
                {
                    name: "先锋服务厅", children: [
                    {name: "chlid1"},
                    {name: "chlid2"},
                    {
                        name: "chlid3", children: [
                        {name: "chlid3-1"},
                        {name: "chlid3-2"},
                        {name: "chlid3-3"},
                        {name: "chlid3-4"}
                    ]
                    }
                ]
                },
                {name: "半环服务厅"}
            ]
            },
            {id: "d1", name: "清新分公司", code: "QX", assignee: "22", children: []},
            {id: "d2", name: "英德分公司", code: "YD", assignee: "", children: []},
            {id: "d3", name: "佛冈分公司", code: "FG", assignee: "", children: []},
        ]
    };

    /*
     单击数据行后触发该事件
     id：行的id
     index：行的索引。
     data：json格式的行数据对象。
     */
    function itemClickEvent(id, index, data) {
        jQuery("#currentRow").val(id + ", " + index + ", " + TreeGrid.json2str(data));
    }

    /*
     通过指定的方法来自定义栏数据
     */
    function customCheckBox(row, col) {
        return "<input type='checkbox'>";
    }

    function customOrgName(row, col) {
        var name = row[col.dataField] || "";
        return name;
    }

    function customLook(row, col) {
        console.log(row);
//        console.log(col);
        var _id = com.project.common.web.utils.id;
        return "<a href='' style='color:blue;'>查看</a> <a href='dealInfor.jhtml?id='" + _id + "'>项目详情</a>";
    }
    function custom(row, col) {
        console.log(row);
//        console.log(col);
        return "";
    }

    //创建一个组件对象
    var treeGrid = new TreeGrid(config);
    treeGrid.show();                            // 显示填充数据后的组件对象。

    /*
     展开、关闭所有节点。
     isOpen=Y表示展开，isOpen=N表示关闭
     */
    function expandAll(isOpen) {
        treeGrid.expandAll(isOpen);
    }

    /*
     取得当前选中的行，方法返回TreeGridItem对象
     id：数据行的id。
     index：数据行的索引。（注：表头除外的行号，从0开始）
     data：json格式的行数据。
     */
    function selectedItem() {
        var treeGridItem = treeGrid.getSelectedItem();
        if (treeGridItem != null) {
            //获取数据行属性值
            console.log(com.project.common.web.utils.id + ", " + treeGridItem.index + ", " + treeGridItem.data.name);
            //alert(treeGridItem.id + ", " + treeGridItem.index + ", " + treeGridItem.data.name);

            //获取父数据行
            var parent = treeGridItem.getParent();
            if (parent != null) {
                //jQuery("#currentRow").val(parent.data.name);
            }

            //获取子数据行集
            var children = treeGridItem.getChildren();
            if (children != null && children.length > 0) {
                jQuery("#currentRow").val(children[0].data.name);
            }
        }
    }
</script>
</body>
</html>